<template>
    <div>
        <h3>优惠券列表</h3>
        <input type="button" value="添加" class="btn btn-primary" @click="add"/>
    </div>
    <div>
        优惠券标题:<input type="text" v-model="queryInfo.title"/>
        门店名称:<select v-model="queryInfo.shopId">
                        <option value="">请选择</option>
                        <option :value="item.Id" v-for="item in shop.list" :key="item.Id">{{ item.ShopName }}</option>
                </select>
        <input type="button" value="查询" class="btn btn-info" @click="getList"/>
    </div>
    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>优惠券ID</td>
                    <td>优惠券类型</td>
                    <td>优惠券标题</td>
                    <td>优惠券副标题</td>
                    <td>优惠券图片</td>
                    <td>优惠券库存</td>
                    <td>每人限领</td>
                    <td>使用条件</td>
                    <td>减免金额</td>
                    <td>折扣价</td>
                    <td>开始时间</td>
                    <td>结束时间</td>
                    <td>使用业务</td>
                    <td>使用须知</td>
                    <td>门店名称</td>
                    <td>服务电话</td>
                    <td>优惠券状态</td>
                    <td>优惠券颜色</td>
                    <td>创建时间</td>
                    <td>修改时间</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{item.Id}}</td>
                    <td>
                        <span v-if="item.DiscountT==1">代金券</span>
                        <span v-if="item.DiscountT==2">折扣券</span>
                        <span v-if="item.DiscountT==3">兑换券</span>
                    </td>
                    <td>{{item.Title}}</td>
                    <td>{{item.FTitle}}</td>
                    <td><img :src="(item.Photo)" alt="" width="100" height="100"/></td>
                    <td>{{item.Count}}</td>
                    <td>{{item.PersonCount}}</td>
                    <td>{{item.Money}}</td>
                    <td>{{item.ReleaseMoney}}</td>
                    <td>{{item.ZheKou}}</td>
                    <td>{{moment(item.BeginTime).format('YYYY-MM-DD')}}</td>
                    <td>{{moment(item.EndTime).format('YYYY-MM-DD')}}</td>
                    <td>{{item.Range}}</td>
                    <td>{{item.Desc}}</td>
                    <td>
                        <span v-if="item.ShopId==2">北京智慧酒店</span>
                        <span v-if="item.ShopId==3">北京如家酒店</span>
                        <span v-if="item.ShopId==4">北京大酒店</span>
                    </td>
                    <td>{{item.Phone}}</td>
                    <td>{{item.State?"可用":"不可用"}}</td>
                    <td>{{item.Color}}</td>
                    <td>{{moment(item.CreateTime).format('YYYY-MM-DD')}}</td>
                    <td>{{moment(item.Update).format('YYYY-MM-DD')}}</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>
        总共{{ data.totalCount }}条
        总共{{ data.totalPage }}页
        {{ queryInfo.pageIndex }}/{{ data.totalPage }}
        <input type="button" value="首页" @click="goPage(1)">
        <input type="button" value="上一页" @click="goPage(queryInfo.pageIndex-1)">
        <input type="button" value="下一页" @click="goPage(queryInfo.pageIndex+1)">
        <input type="button" value="尾页" @click="goPage(data.totalPage)">
        <b v-for="item in data.totalPage" :key="item" @click="goPage(item)">{{ item }}</b>
        <input type="text" v-model="queryInfo.pageIndex"/>
        <input type="button" value="跳转" @click="goPage(queryInfo.pageIndex)"/>
        <select v-model="queryInfo.pageSize" @change="show">
            <option v-for="item in arr" :key="item" :value="item">每页显示{{ item }}页</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';
const router=useRouter();
const route=useRoute();

//分页

const show=()=>{
    queryInfo.pageIndex=1;
    getList();
}

const goPage=(num:any)=>{
    if(num<1){
        queryInfo.pageIndex=1;
        return;
    }
    if(num>data.totalPage){
        queryInfo.pageIndex=data.totalPage;
        return;
    }
    queryInfo.pageIndex=num;
    getList();
}

//函数
const add=()=>{
    router.push('/discountAdd');
}

let arr=ref([2,4,6,8]);

let shop:any=reactive({
    list:[],
});

let data:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0,
});

let queryInfo=reactive({
    pageIndex:1,
    pageSize:2,
    title:'',
    shopId:''
});

onMounted(()=>{
    getList();
    getShopList();
})

//获取门店列表
const getShopList=()=>{
    axios({
        url:'/api/Shop/GetShopList',
        method:'get',
        params:{
            pageSize:1000
        }
    })
    .then((res)=>{
        console.log(res);
        shop.list=res.data.list;
    })
    .catch((err)=>{
        console.log(err);
    })
}

const getList=()=>{
    axios({
        url:'/api/Discount/GetDiscountList',
        method:'get',
        params:queryInfo
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data.list;
        data.totalCount=res.data.totalCount;
        data.totalPage=res.data.totalPage;
    })
    .catch((err)=>{
        console.log(err);
    })
}

</script>

<style scoped>
b{
    padding: 5px;
}

</style>